<template>
    <div>
        <div class="box">
            <div class="contie">
                <p>
                   答题卡
                </p>
            </div>
            <div class="convenience">
                <ul>
                    <li :class="changeClass(item.choice)" @click="openConten(item.id)" v-for="(item, index) of params"
                        :key="index">
                        {{ index + 1 }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { answerConvert } from '@/util/disorganizeABCD'
export default {
    name: "",
    data() {
        return {
            answerY: '1',
            answerN: '1',
            accuracy: '90%',
        }
    },
    props: ['params'],
    created() {

    },
    mounted() {

    },
    methods: {
        //通过题号转换A/B/C/D
        optionId(choice) {
            return answerConvert(
                this.$store.getters["exam/getAnswerById"], (choice)
            )
        },
        //点击导航切换左侧题目和选择
        openConten(id) {
            let index = this.$store.getters["exam/getCentreIndex"](id);
            this.$store.commit("exam/setListIndex", { index });
        },
        //控制选项样式
        changeClass(params) {
            return {
                choice: params !== -1 ? true : false,
                //unchoice: params === -1 ? true : false,
            }
        },
    },
}
</script>
<style scoped lang="scss">
.box {

    .contie {
        p {
            display: inline-block;
            //margin-left: 36px;
            text-align: center;
            width: 100%;
            font-weight: bold;
            font-size: 20px;

        }

        span {
            color: green;
            font-weight: bold;
        }

        .red {
            color: red;
        }
    }

    .convenience {
            margin-top: 100px;
        ul {
            width: 316px;
            margin: 0 auto;
            margin-top: 20px;

            li {
                display: inline-block;
                border: 1px solid #8c8c8c;
                height: 30px;
                line-height: 30px;
                width: 30px;
                text-align: center;
            }

            .choice {
                background-color: #91d5ff;
            }

            :hover {
                cursor: pointer;
            }
        }
    }
}
</style>